<template>
    <div class="viewerDiv" :class="device == 'mobile' ? 'active' : ''">
        <div class="viewerDiv_containers active" v-if="device === 'mobile'">
            <div class="aiBox" :style="{ color: bgColor }">
                {{ bgColor == 'red' ? '阳性' : bgColor == 'green' ? '阴性' : '无' }}
            </div>
            <div class="viewerDiv_containers_item">
                病理号：{{ basicInfos.pathologyId }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                {{ basicInfos.name ? basicInfos.name : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                {{ basicInfos.sexName ? basicInfos.sexName : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                {{ basicInfos.age ? basicInfos.age : "暂无" }} {{ basicInfos.ageUnitName &&
                    basicInfos.age ? basicInfos.ageUnitName : "" }}
            </div>


        </div>
        <div class="viewerDiv_containers" v-else>
            <div class="aiBox" :style="{ color: bgColor }">
                {{ bgColor == 'red' ? '阳性' : bgColor == 'green' ? '阴性' : '无' }}
            </div>
            <div class="viewerDiv_containers_item">
                病理号：{{ basicInfos.pathologyId }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                {{ basicInfos.name ? basicInfos.name : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                {{ basicInfos.sexName ? basicInfos.sexName : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                {{ basicInfos.age ? basicInfos.age : "暂无" }} {{ basicInfos.ageUnitName &&
                    basicInfos.age ? basicInfos.ageUnitName : "" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item" v-if="basicInfos.bedId">
                {{ basicInfos.bedId ? basicInfos.bedId : "" }}
            </div>
            <div class="viewerDiv_containers_item_line" v-if="basicInfos.bedId"></div>
            <div class="viewerDiv_containers_item" v-if="basicInfos.freezeTypeName">
                {{ basicInfos.freezeTypeName ? basicInfos.freezeTypeName : "" }}
            </div>
            <div class="viewerDiv_containers_item_line" v-if="basicInfos.freezeTypeName"></div>
            <div class="viewerDiv_containers_item" v-if="basicInfos.checkCategoryName">
                检查类型：{{ basicInfos.checkCategoryName ? basicInfos.checkCategoryName : "" }}
            </div>
            <div class="viewerDiv_containers_item_line" v-if="basicInfos.checkCategoryName"></div>
            <div class="viewerDiv_containers_item" v-if="basicInfos.specimenTypeName">
                标本类别：{{ basicInfos.specimenTypeName ? basicInfos.specimenTypeName : "" }}
            </div>
            <div class="viewerDiv_containers_item_line" v-if="basicInfos.specimenTypeName"></div>
            <div class="viewerDiv_containers_item">
                取材脏器：{{ basicInfos.sampleOrganName ? basicInfos.sampleOrganName : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                送检医生：{{ basicInfos.sendDoctor ? basicInfos.sendDoctor : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                临床诊断：{{ basicInfos.pathologyClinicalDiagnosis ? basicInfos.pathologyClinicalDiagnosis : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                状态：{{ basicInfos.currentLevelLabel ? basicInfos.currentLevelLabel : "暂无" }}
            </div>
            <div class="viewerDiv_containers_item_line"></div>
            <div class="viewerDiv_containers_item">
                取材时间：{{ basicInfos.createTime ? basicInfos.createTime : "暂无" }}
            </div>
        </div>
        <!-- 切片阴阳性 -->
        <!-- 自定义按钮导航栏 -->
        <div class="btnGroup-containers">
            <div class="btnGroup-containers-content">
                <!-- <div class="btnGroup-containers-content-item">
                    标注
                </div> -->
            </div>
        </div>

        <el-button type="primary" size="mini" class="viewerDiv_btn" v-if="device == 'mobile'">更多信息</el-button>
    </div>
</template>

<script>
const { body } = document
const WIDTH = 1080 // refer to Bootstrap's responsive design

export default {
    name: 'viewTitle',
    props: [
        "basicInfos",
        "bgColor"
    ],
    components: {

    },
    data() {
        return {

        }
    },
    computed: {
        device() { //设备
            return this.$store.state.device
        },
    },
    mounted() {
        const rect = body.getBoundingClientRect()
        if (rect.width - 1 < WIDTH) {
            this.$store.dispatch('toggleDevice', 'mobile')
        } else {
            this.$store.dispatch('toggleDevice', 'pc')
        }

    },
    methods: {

    }
}
</script>
<style scoped lang="scss">
.viewerDiv.active {}

.btnGroup-containers {
    border-top: 1px solid #333;
    padding: 0 32px;
}

.aiBox {

    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.viewerDiv_btn {
    position: absolute;
    top: 1px;
    right: 5px;
}

.viewerDiv {
    position: relative;

    .viewerDiv_containers {
        padding: 0 32px;
        display: flex;
        align-items: center;
        color: #000;
        overflow-x: hidden;
        white-space: nowrap;

        &_item {
            font-size: 16px;
            line-height: 30px;
            padding: 0 10px;
            font-weight: 700;


            &_line {
                width: 2px;
                height: 14px;
                background: #000;
            }
        }
    }

    .viewerDiv_containers.active {
        width: 90%;
        padding: 0 8px;

        &_item {
            font-size: 13px;
            line-height: 30px;
            padding: 0 4px;
            font-weight: 700;


            &_line {
                width: 2px;
                height: 14px;
                background: #000;
            }
        }
    }
}
</style>
